<template>
  <h1>首页</h1>
  <!--如果用户的信息为空,说明没有登录,展示 注册 登录 链接-->
  <div v-if="user==null">
    <router-link to="/reg" style="margin-right:15px">
      <el-button>注册</el-button>
    </router-link>
    <router-link to="/login">
      <el-button>登录</el-button>
    </router-link>
  </div>
  <!-- 反之,如果用户信息不为空,说明已登录,展示 欢迎信息与"发微博" "退出登录" 按钮 -->
  <div v-else>
      <h2>欢迎{{user.nickname}}回来</h2>
    <router-link to="/post">
      <el-button>发微博</el-button>
    </router-link>
    <router-link to="/personal">
      <el-button>我的微博</el-button>
    </router-link>
    <el-button @click="logout()">退出登录</el-button>
  </div>
  <hr>
  <div v-for="weibo in arr">
      <router-link :to="'/detail?id='+weibo.id" style="text-decoration: none;color:#555;">
        <h3>{{weibo.nickname}}说:{{weibo.content}}</h3>
        <img v-if="weibo.imgUrls!=null"
            :src="BASE_URL+url"
             width="100"
             v-for="url in weibo.imgUrls.split(',')">
      </router-link>
  </div>

</template>

<script setup>
import {onMounted, ref} from 'vue';
import axios from "axios";
//1.取出登录成功后存入localStorage中的user数据
//但注意字符串格式的数据需要转回为JS对象后才可以打点获取JS对象的属性值
//三元表达式的写法,有数据转回JS对象,没有数据则为null
  let user = ref(localStorage.user?JSON.parse(localStorage.user):null);
  // console.log(user.value);
  const logout=()=>{
    if (confirm('您确认要退出吗?')){
      localStorage.clear();
      user.value=null;
    }
  };
  //准备空数组用来装所有的微博数据
  const arr=ref([]);
  //页面向后端发请求获取所有的微博数据
onMounted(()=>{
  axios.get(BASE_URL+'/v1/weibos/list').then((response)=>{
    if(response.data.code==2002){
      arr.value=response.data.data;
    }
  });
});


</script>
